<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:fragment="head(title)">
  <meta charset="UTF-8">
  <title th:replace="${title}">博客详情</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!--    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">-->
  <link rel="stylesheet" th:href="@{/css/semantic.min.css}">
  <link rel="stylesheet" th:href="@{/css/style.css}">
  <link rel="stylesheet" th:href="@{/lib/editormd/css/editormd.min.css}">
</head>
<body>


<!--管理后台头部导航开始-->
<nav th:fragment="header(n)" class="ui inverted attached segment v-padded-tb-mini v-shadow-small">
  <div class="ui container">
    <div class="ui inverted secondary stackable menu">
      <h2 class="ui teal header item">管理后台</h2>
      <a th:href="@{/admin/blogs}" th:classappend="${n  == 1} ? 'active'" class="v-mobile-hidden v-item item"><i class="home icon"></i>博客</a>
      <a th:href="@{/admin/types}" th:classappend="${n  == 2} ? 'active'" class="v-mobile-hidden v-item item"><i class="idea icon"></i>分类</a>
      <a th:href="@{/admin/tags}" th:classappend="${n  == 3} ? 'active'" class="v-mobile-hidden v-item item"><i class="tags icon"></i>标签</a>
      <div class="right v-item v-mobile-hidden menu">
        <div class="ui dropdown item">
          <div class="text">
            <img src="https://picsum.photos/id/1027/100/100" th:src="@{${session.user.avatar}}" alt="用户头像" class="ui avatar image">
            <span th:text="${session.user.nickname}"></span>
          </div>
          <i class="dropdown icon"></i>
          <div class="menu">
            <a th:href="@{/admin/logout}" class="item">注销</a>
          </div>
        </div>
      </div>

    </div>
  </div>

  <!--手机端下拉列表-->
  <a href="#" class="ui menu toggle black icon button v-right-top v-mobile-show">
    <i class="sidebar icon"></i>
  </a>
</nav>
<!--管理后台头部导航结束-->


<!--底部部分开始-->
<footer id="footer" class="ui inverted vertical segment v-padded-tb-massive">
  <div class="ui center aligned container">
    <div class="ui stackable inverted divided grid">
      <div class="three wide column">
        <div class="ui inverted link list">
          <div class="item">
            <!--微信图片-->
            <img th:src="@{/images/wechat.jpg}" class="ui rounded image" alt="" style="width: 110px">
          </div>
        </div>
      </div>
      <div id="newblog-container">
        <div class="three wide column" th:fragment="newBlogList">
          <h4 class="ui inverted header v-text-thin v-text-spaced">最新博客</h4>
          <div class="ui inverted link list">
            <a href="#" class="item" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank" th:each="blog : ${newBlogs}" th:text="${blog.title}">用户故事（User Story）</a>
            <!--/*-->
            <a href="#" class="item">用户故事（User Story）</a>
            <a href="#" class="item">用户故事（User Story）</a>
            <!--*/-->
          </div>
        </div>
      </div>
      <div class="three wide column">
        <h4 class="ui inverted header v-text-thin v-text-spaced">联系我</h4>
        <div class="ui inverted link list">
          <a href="#" class="item" th:text="#{index.email}">Email：veo@163.com</a>
          <a href="#" class="item">QQ：[[#{index.qq}]]</a>
        </div>
      </div>
      <div class="seven wide column">
        <h4 class="ui inverted header v-text-thin v-text-spaced">Blog</h4>
        <div class="ui inverted link list">
          <p class="v-text-thin v-text-spaced v-opacity-mini" th:text="#{index.blog}">这是我的个人博客、会分享关于编程、写作、思考相关的任何内容，希望可以给来到这儿的人有所帮助...</p>
        </div>
      </div>
    </div>
    <div class="ui inverted section divider"></div>
    <p class="v-text-thin v-text-spaced v-opacity-tiny" th:text="#{index.copy}">Copyright © 2016 - 2021 veo Designed by veo</p>
  </div>
</footer>
<!--底部部分结束-->



<th:block th:fragment="script">
  <script th:src="@{/js/jquery-3.6.0.min.js}"></script>
  <script th:src="@{/js/semantic.min.js}"></script>
  <script th:src="@{/lib/editormd/editormd.min.js}"></script>
</th:block>
<script>
  $("#newblog-container").load(/*[[@{/footer/newblog}]]*/"/footer/newblog");
</script>
</body>
</html>